<template>
  <div>
    <header>
      <Header2>
        <Login></Login>
      </Header2>
    </header>
    <section>
      <Detail></Detail>
    </section>
    <footer>
      <Footer></Footer>
    </footer>
  </div>

</template>

<script>
import Header2 from "@/components/Header2";
import Footer from "@/components/Footer";
import Detail from "@/components/Detail";
import Login from "@/components/Login";
export default {
  name: "other",
  components: {
    Header2,
    Footer,
    Detail,
    Login
  }
}
</script>

<style scoped lang="less">
.header {
  width: 1200px;
  margin: auto;

  .top {
    overflow: hidden;
    height: 106px;

    img {
      float: left;
      height: 55px;
      margin-top: 22px;
      margin-right: 200px;
    }

    .search {
      float: left;
      width: 400px;
      margin: 30px 6px 0 0;

      /deep/ .ant-input.ant-input-lg {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
      }

      /deep/ .ant-btn.ant-btn-lg.ant-input-search-button {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }
    }

    .login {
      height: 100%;
      float: right;
      margin-right: 100px;
      font-size: 14px;
      padding: 32px 0 0;
    }
  }

  .list {
    zoom: 1;

    ul {
      overflow: hidden;

      li {
        float: left;
        margin: 0 30px 0 0;
        font-size: 16px;
      }
    }

  }
}
</style>